<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.mydiv{
			width: 100px;
			height: 100px;
			background: red;
		}
		.mydiv2{
			width: 100px;
			height: 100px;
			background: green;
		}
		.myspan{
			width: 100px;
			height: 100px;
			display: block;
			background: yellow;
		}
	</style>
</head>
<body>
	<div class="mydiv">1</div>
	<div class="mydiv2">2</div>
	<span class="myspan">3</span>
	<script>
		var mydiv = document.querySelector(".mydiv");
		var myspan = document.querySelector(".myspan");
		console.log(mydiv.__proto__)//HTMLDivElement这个原型是div的原型，不能共用其他元素标签。
		console.log(mydiv.__proto__.__proto__)//HTMLElement，所有元素标签共用原型，把属性和方法挂载到这个原型上，所有的dom都可以调用
		HTMLElement.prototype.ontap = function(callback){
			var oldtime,newtime,startX,endX;
			this.addEventListener("touchstart",function(e){
				if(e.targetTouches.length>1){
					return
				}
				startX = e.targetTouches[0].clientX;
				oldtime = Date.now();
			})
			this.addEventListener("touchend",function(e){
				newtime = Date.now();
				var chatime = newtime-oldtime;
				endX = e.changedTouches[0].clientX;
				if(chatime>100){
					return
				}
				var chaX = Math.abs(endX-startX);
				if(chaX>20){
					return
				}
				console.log('封装的移动端ontap事件触发了');
				callback()				
			})
		}	
		myspan.ontap(()=>{
			console.log(1)
		})
		mydiv.ontap(()=>{
			console.log(2)
		})
	</script>
</body>
</html>